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Introduzione alla collana 


Windows Phone 8 è l'innovativo 
sistema operativo mobile, realizzato 
da Microsoft, che si presenta con una 
grafica tutta nuova e una struttura di 
base totalmente rivoluzionata 
rispetto alle precedenti versioni di 
Windows Phone. 


Semplice ed efficace, la 
programmazione su WPS8 S 
consigliata a programmatori esperti e 
al neofiti che faranno di questi ebook 
la loro prima esperienza da 
sviluppatori. 


La collana é strutturata in modo tale 
da fornire le conoscenze di base del 
linguaggio di programmazione C# 
negli ambienti dedicati a Windows 
Phone 8, trovando immediato 
riscontro pratico in una o più 
applicazioni realizzate a fine lezione. 
A differenza di un comune manuale, 
ogni ebook spiega passo passo come 
realizzare applicazioni ben 
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strutturate e di successo sull'ambiente 
di sviluppo Visual Studio. Ogni 
pubblicazione risulta indipendente 
dalle altre (successive o precedenti), 
infatti sarà costituita da un'utile 
introduzione, una parte teorica con 
pochi concetti ben esplicati cul 
seguirà la realizzazione dl 
applicazioni per  consolidarli e 
approfondirli. Tuttavia, è presente 
una propedeuticità intrinseca: ogni 
lavoro è più complesso rispetto al 
precedente e dà per acquisiti i vecchi 
concetti evitando di annoiare il 
lettore con continue ripetizioni e 
fornendo uno strumento di 
apprendimento davvero Immediato. 


La collana é destinata ai potenziali 
sviluppatori per Windows Phone 8 
che sl approcciano per la prima volta 
alla programmazione; agli 
appassionati del settore che cercano 
un valido approfondimento e, perché 
no, un piacevole passatempo; a chi é 
già dentro il mondo della 
programmazione ma non conosce 
sufficientemente C#. Le applicazioni 
realizzate saranno complete e 
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correlate alla teoria, ma sapranno 
dare un valido spunto per progetti 
tutti nuovi e, a fine raccolta, ogni 
lettore sarà in grado di realizzare ciò 
che più gli piace proprio grazie agli 
strumenti appresì dal nostri esercizi 
predefiniti. 
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Parte 1 


LA PROGRAMMAZIONE 
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1. Stile di programmazione 


1.1 La programmazione 
orientata agli oggetti 


La programmazione orientata agli 
oggetti (OOP, Object Oriented 
Programming) rappresenta uno stile 
fondamentale di programmazione. 


Essa comporta il raggruppamento di 
strutture dati ed elementi procedurali 
in classi (parti di codice sorgente che 
definiscono i tipi di dato). La 
diffusione e il successo della OOP 
sono dovute a un livello di astrazione 
superiore rispetto alla 
programmazione procedurale, al 
codice molto più facile da gestire e 
alla riusabilità. 

Annoveriamo tra i più noti linguaggi 
orientati agli oggetti Java, Visual 
Basic, Delphi, C++ e ovviamente il 
nostro C+. 
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2. Oggetti e class1 in C# 


2.1 Classl e oggetti 


Le classi sono frammenti di codice 
sorgente deputati alla definizione di 
nuovi tipi di dato. Questi ultimi 
saranno identificati tramite 
caratteristiche e proprietà che 
astraggano in modo semplice ed 
efficace uno o più oggetti reali. Le 
classi definiscono un insieme di 
oggetti in base al loro connotati e non 
per elenco degli oggetti stessi. In C# 
quindi, le classi specificano come gli 
oggetti sono strutturati e come essi sl 
comportano. L'oggetto, infatti, altro 
non è che un'istanza di una 
determinata classe. 


L'istanza rappresenta un elemento 
distinto, allocato e configurato in 
memoria in maniera concreta e che 
può assumere valori propri. Finché 
un’area di memoria non è allocata, 
nessun oggetto può esistere. Ogni 
istanza é separata dalle altre, ma 
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presenta le stesse caratteristiche 
generali degli altri oggetti 
appartenenti alla stessa classe. 

Se la classe é un'idea l'istanza é la sua 
realizzazione: sì pensl al concetto di 
“Penna”, lil colore dell'inchiostro, il 
materiale e la forma di essa sono 
caratteristiche comuni a tutte le 
penne, ma ognuna di esse non le 
presenta necessariamente uguali a 
quelle di un’altra (penne blu e penne 
rosse, ad esempio, sono caratterizzate 
dal colore dell’inchiostro ma é diverso 
nelle une e nelle altre). Da qui si può 
dire che la “classe penna” costituisce 
lo stampo di ogni “oggetto penna”, e 
che ogni istanza é un elemento 
presente in memoria che può 
assumere svariati valori. 


2.2 Definire una classe 


Definiamo una classe con i seguenti 
codici: 


[modificatori] class Nome 


t 
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Nel caso della classe “Punto” avremo 
ad esempio: 


pubilrte class Ponto 


t 


Il campo [modificatori| è “public”, un 
modificatore che estende la visibilità 
di questa classe a tutte le altre. In C# 
la visibilità della classe può essere 
estesa, tramite gli access specifier 
(specificatori di accesso o descrittori 
di visibilità), a quattro livelli: classe, 
sottoclasse, mondo esterno e package 
(un insieme di classi e interfacce che 
intervengono nello stesso contesto). 
Più in la utilizzeremo anche 
“internal”, un modificatore che limita 
la visibilità della classe ai soli 
elementi appartenenti allo stesso 
assembly (un insieme di funzionalità 
che vengono distribuite in una sola 
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implementazione) della classe. 


2.3 Variabili e metodi 


All’interno di una classe distinguiamo 
variabili e metodi. 


2.3.1 Variabili 


Le variabili (o variabili di istanza) 
attribuiscono a una classe le 
caratteristiche che dovrà presentare. 
Queste possono comprendere tipi 
primitivi quali int, double, bool, char, 
ma anche altri oggetti. La sintassi per 
dichiarare una variabile è la seguente: 


[modificatori] tipo Nome 


I modificatori delle classi sono 
quattro: 


e public la variabile è visibile in 
tutte le altre classi; 

e private limita la visibilità solo 
alla classe stessa; 


e protected la visibilità é limitata 
alla classe e alle sue ereditarie 
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(l'’ereditarietà è un legame 
stabilito tra due tipi); 

®© internal dichiara la visibilità 
della classe solo all’interno del 
package corrente. 


Se sl volesse creare una classe 
“Punto” nel piano cartesiano, la 
classe in questione necessiterebbe di 
due coordinate e, quindi, di due 
variabili di tipo reale: 


private double X; 


private double YI; 


In questo modo si è creato “lo 
stampo” per ogni oggetto Punto, che 
avrà queste due variabili come 
“caratteristica”. 


2.3.2 Metodi 


I metodi rappresentano 
essenzialmente un blocco di codice 
che consenta di effettuare operazioni 
sul tipl: 


[modificatori] tipoRitorno 
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Nome (parametri) 


t 


I modificatori sono identici a quelli 
delle variabili e mantengono le stesse 
funzioni. Il tipo di ritorno identifica il 
risultato che lelaborazione del 
metodo restituisce. Nel caso 
l'elaborazione sia passiva, e quindi 
non produca output, il tipo di ritorno 
sarà “void” (nulla). Il metodo può 
ricevere delle variabili che 
completino l'elaborazione, queste 
sono dette parametri e sono 
opzionali. Ogni metodo che 
restituisce un tipo (quindi non void) 
deve includere al suo interno 
l'istruzione “return”. Questa servirà a 
mandare in output il frutto di 
un'elaborazione. 


Ecco un esempio: 


public int Sommalint a, int b) 
| 


Itit. Somina = a + Di 
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return Somma: 


Esiste un metodo particolare 
chiamato “Costruttore” che permette 
di definire le modalità di creazione di 
un oggetto, e quindi, come esso debba 
essere istanziato. Qui è bene scrivere 
tutto il codice che definirà i valori 
iniziali delle variabili distanza. La 
sua definizione é identica a quella di 
un qualsiasi metodo, ma differisce 
per l'assenza del nome e per il tipo di 


ritorno che è la classe di 
appartenenza. 


Un esempio completo sulla classe 
“Punto”: 


public celass Funto 


î 


private double X; 


privare double: X: 


public Punto() 
1 
x = 0.0: 
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2.4 Dichiarare un oggetto 


Un oggetto può essere considerato 
come una variabile qualunque e può 
essere dichiarato anche senza 
inizializzazione: 


TipoOggetto nome; 


Molto spesso, però, si utilizza 
l’inizializzazione diretta: 


TipoOggetto nome = new 
TipoOggetto (([parametril); 
L'istruzione “new” corrisponde 
all’allocazione diretta di un oggetto in 
memoria ed è necessaria per creare 
un'istanza. 

È possibile accedere alle variabili di 
un oggetto o invocare il metodo di 
tale oggetto tramite la seguente 
sintassi: 


3 pagine rimaste nel capitolo 17% 





nomeOggetto.NomeVariabile 


nomeOggetto.NomeMetodo(|parame 


tei]): 


La visibilità dei metodi e delle 
variabili deve essere estesa alla classe 
in cul operiamo. Qualora lavorassimo 
su un'altra classe non sarebbe, ad 
esempio, possibile richiamare 
l’accesso alla variabile (private) “X” di 
un'istanza dell'oggetto “Punto”. 
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3. Passaggio di parametriin 
C# 


3.1 Argomento dei metodi 


Quando una funzione agisce su degli 
argomenti, essa può utilizzarli per 
giungere ad un risultato o modificarli. 


I metodi vengono dichiarati 
all’interno di una classe specificando, 
oltre al nome, il livello di accesso, 1l 
valore restituito e, se richiesti, 1 
parametri del metodo. I parametri 
sono racchiusi tra parentesi ( ) e 
separati da virgole. È possibile lasciar 
vuote le parentesi qualora non siano 
necessari parametri del metodi. 


In C# è possibile avvalersi del 
passaggio di tali parametri per valore 
o per riferimento garantendo quindi 
(proprio tramite il passaggio) una 
linea di comunicazione diretta tra la 
funzione — chiamante e — quella 
chiamata. 
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3.2 Passaggio di parametri per 
valore 

Il modo più semplice di passare un 
dato ad una funzione é il passaggio 
per valore. Tale passaggio garantisce 
alla funzione l’accesso al parametro in 
questione, ma non gli consente di 
apportare ad esso modifiche 
definitive. 

Ecco un esempio di passaggio per 
valore: 


Resetta(x): 


Apri 


3 


bublie vold Resetta lint 1) { 


1=0; 


La variabile intera x inizialmente vale 
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5; dopo un primo incremento, il suo 
valore diventa 6. A questo punto 
viene chiamato il metodo Resetta sul 
valore di x=6. L'intero 1, nella 
funzione, contiene una copia del 
valore di x, in questo caso quindi vale 
6. Dopo l'istruzione 1=0, il valore di 1 
diventa 0 ma quello di x resta 6 
(invariato). Nella terza riga viene 
chiamata nuovamente l'istruzione 
x++ che rende x = 7 (e non 1 perché 
non é stata x ad essere resettata a 
zero, ma una sua copia chiamata i). Il 
passaggio per valore opera tramite 
una copia che non modifica il valore 
originario. È utile affidarsi a questo 
metodo qualora non si voglia 
modificare il valore del parametro, 
ma lo sl debba utilizzare per elaborare 
un altro risultato, ad esempio per 
restituire il valore della radice 
quadrata di x senza modificare x 
stessa. 


3.3 Passaggio di parametri per 
riferimento 


Quando anziché un tipo di base venga 


2 pagine rimaste nel capitolo 24% 





passato un oggetto come parametro, 
interviene ll passaggio per 
riferimento. Il metodo riceve un 
riferimento all'oggetto e non una sua 
copia, in modo tale che 1 cambiamenti 
apportati all'oggetto sì ripercuotano 
anche fuori dal metodo. È possibile 
ottenere questo risultato anche 
utilizzando le parole chiave ref e out. 


A.tfre se = As 


X++! 


Resettalref x}: 


Xx++: 


public void Resetta ref int 


i) { 


Il valore finale di x sarà realmente 1 
perché i cambiamenti apportati 
all’interno del metodo Resetta sono 
permanenti. 


Ref è stato utilizzato ipotizzando che 
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il valore della variabile sia gia 
definito. Quando sì adopera la parola 
chiave out sì vuole che la variabile, 
inizialmente senza valore, venga 
inizializzata dalla funzione stessa. 
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Parte 2 


IL SEMAFORO: 
IMMAGINI 2D E NAVIGAZIONE 


TRA LE PAGINE 
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4. Elementi pratici per le app 


Grazie al livello 1 di questo corso di 
programmazione, abbiamo appreso le 
nozioni necessarie alla creazione di 
utili elementi per le applicazioni 
Windows Phone. In questo secondo 
livello inizieremo ad introdurre nuovi 
oggetti (con relativa implementazione 
nel progetto) e lo studio di app 
dinamiche tramite le modifiche 
dell'interfaccia grafica. Grazie agli 
esempi qui descritti sara possibile 
anche creare progetti su più pagine e 
sfruttare le variabili globali. 
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5. Creare e gestire un nuovo 
oggetto: 1l semaforo 


5.1 Creazione dell'interfaccia 
grafica 


Dopo aver creato un nuovo progetto, 
basterà impostare il —modello 
“Applicazione Windows Phone” e 
rinominare la soluzione “Semaforo”. 
Selezioniamo la “TextBlock” con testo 
“nome pagina”, clicchiamo col tasto 
destro del mouse e selezioniamo 
“Elimina” come in figura. 
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Taglia 
Copia 


Elimina 
Ordine 
Allinea 


Reimposta layout 


Raggruppa 


Imposta selezione corrente 
Modifica testo 

Modifica stile 

Visualizza codice 
Visualizza onigine 


Passa a 





L'emulatore sl presenta diviso in due 
parti. 


1. In alto il “Textblock” 
applicazione. 


2. Nel corpo della pagina una 
struttura chiamata “Grid”, 
delimitata da un rettangolo. 
Questo elemento rappresenta una 


O pagine rimaste nel capitolo 31% 





griglia su cui é possibile 
formattare gli elementi 
appoggiandosi alla struttura 
definita da “Row” (riga) e 
“Columns” (colonne). 


Per allungare l'elemento Grid 
trasciniamo il bordo superiore 
allargandolo quasi fino a toccare il 
TextBlock soprastante. 
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5.2 Introduzione di figure 2D 


Una volta preparata l’area di lavoro, 
apriamo la casella degli Strumenti. In 
questa — prima applicazione cl 
torneranno utili “Ellipse” e 
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“Rettangle” che definiscono 
rispettivamente gli elementi grafici 
“ovale” e “rettangolo”. 


Ellipse 1 
Grid 
HyperlinkButton 


O 


Image 
LongListSelector 
Map 
MediaElement 
MultiScalelmage 
Panorama 


Panoramaltem 





#4 PasswordBox 
3° Pivot 
<> Pivotitem 
E) ProgressBar 
@ RadioButton 
C] Rectangle ?, 


L'oggetto (il rettangolo in questo 
caso), una volta selezionato, va 
trascinato sull'emulatore. In basso a 
destra andremo a modificare 1 
parametri associati utilizzando 1 
seguenti valori: 


e Height = 4.00; 
e HorizontalAlignment = Center; 
e Margin = 0, 50, 0,0; 
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e VerticalAlignment = Top; 
e \Vidth = 150; 


Infine modifichiamo l’attributo “Fill” 
Impostando un colore simile a un 
violetto chiaro. Alla fine dovremmo 
avere una situzione simile a quella in 
figura: 


2001 


|. APPLICAZIONE 


La 
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Il rettangolo appena definito sara la 
scatola del semaforo. Ora procediamo 
con la creazione delle luci al suo 
interno. Allo stesso modo del 
rettangolo, trasciniamo l'oggetto 
Ellipse sull'emulatore. Sarà utile 
ripetere l'operazione fino a inserire 3 
oggetti e, per ognuno di essi, 
imposteremo le proprietà come 
segue: 


1. Height = 100; 

2. HorizontalAlignment = Center; 

3. VerticalAlignment = Top; 

4. Width = 100; 

5. Fill = LightGray (grigio chiaro); 
Le proprietà appena definite sono 
comuni a tutte e tre gli oggetti ma, 
com facile intuire, sarà necessario 
definire i margini in modo differente: 

e ellipsel : Margin = 0, 75, 0,0; 

e ellipse2 : Margin = 0, 200, 0,0; 


e ellipse3 : Margin = 0, 325, 0,0; 
Abbiamo così ottenuto le forme del 
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semaforo: 


tl 
APPLICAZIONE 





Per completare l'interfaccia, mancano 
solo i bottoni di controllo. I bottoni 
saranno quattro, di cul tre per 1 
rispettivi colori del semaforo e uno 
per la stampa di una notifica. 
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Inseriamo 1 quattro bottoni 
nellemulatore (se non ricordate 
come, controllate il primo volume del 
corso) e per ognuno di essi definiamo 
le proprietà. 


button1: 
e Content = VERDE; 
e HorizontalAlignment = Left; 
e Foreground = Green (Verde); 
e Margin = 0,0,0,120; 
e VerticalAlignment = Bottom; 
e Click = button1_Click; 
button2: 
e Content = GIALLO; 
e HorizontalAlignment = Center; 
e Foreground = Yellow (Giallo); 


e Margin = 0,0,0,120; 


VerticalAlignment = Bottom; 


Click = button2_ Click; 
button3: 
e Content = ROSSO; 
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L'interfaccia grafica è pronta, non 
resta che implementare la parte 
logica del programma. 


5.3 Creazione di un oggetto 
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La creazione di un oggetto in Visual 
Studio é molto semplice. Basta andare 
su “Esplora soluzioni” e, cliccando col 
tasto destro sul nome del progetto, 
selezionare la voce “Aggiungi” e 
infine “Nuovo elemento...”. 


[ [a] larlone punta all ila E sde l ca) O 
pe EE selle lingue supportat la sche pragett Rie 
ile RESX per lingua ch tare i ‘adotti del hl Soluzione 'Semal 
tring U. ie 
TL il Compa 
ng | 4 Properti 
Lal ltu IE pi #8 Riferim 
Distribuisci fmi Asset: 
si Esegui analisi del cod Ba seleza fmi Fisso: 
Lai imposta ambit D fai 
‘ ce Localhned® 
{| TextBlock Tex i aio 
carpa E Nuova visualez p | D) MainPag 
Apn in Blend 
--LontTent Pane] 
1 n sd Apri Store Test Ki 
j Grid x:Mame="Com 
DO Nuovoelemento.. CTRL + MAIUSC»4 A Aggiung 
‘(i Elemento esistente... MAIUSC+ALT+A Aggiungi riferimento... 
‘wi MHuovacartela Aggiungi nfenme to al 
EA Classe MAIUSC+ALT+ÙC | i] Gestisci pacchetti Mubet, 
_ CLI aLe! Lai ne | 
Ò i | ‘Button Conten {} Imposta come progetto di anno 


Da qui possiamo visualizzare una lista 
di scelte. Ai fini di questo progetto, ci 
servirà creare un nuovo oggetto 
pertanto selezioniamo “Classe” e nel 
campo “Nome” inserlamo 
“Semaforo.cs”. 
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Notiamo subito nella struttura del 
progetto l'aggiunta di un nuovo file 
Semaforo.cs. Questo è molto simile a 
“MainPage.xaml.cs” e andrà a 
costituire l'oggetto semaforo della 
nostra applicazione. 





TE Lie]. MainPage.xaml* 


“e "  SRRIREGORI, RIPIENO, CSCRIVGIARE: | TGAEctS 
SemaToro.semarori 


-lusing System; 
using System.Collections.Generic; 
using System.Ling; 
using System.Text; 
using System.Threading.Tasks; 


-|namespace Semaforo 


{ 
- class Semaforo 
{ 
} 
} 


Per prima cosa definiamo le costanti a 
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cui verra associato il valore simbolico 
del colore. Quindi inseriamo il 
seguente codice all’interno della 
classe: 


public class pbemaforo 


| 

public vonst int VERDE = 
di 

bubpi Le censt ne GIALLO £ 
La 

publio csonst Int ROSSO = 
o 
} 
Successivamente inseriamo la 


variabile d’istanza che terrà memoria 
dello stato del semaforo: 


private int stato; 


Procediamo con la creazione del 
metodo costruttore, impostando il 
valore della variabile stato a -1, in 
quanto il semaforo alla creazione 
“non é in funzione”: 


1 pagina rimasta nel capitolo 45% 





public Semaforo() 


î 


biegslo = »iL3 


Adesso definiamo i metodi GetStato e 
SetStato per consentire a classi 
esterne di leggere o modificare il 
valore della variabile Stato: 


public int GetStatol) 
{ 


teturi ECnNIB.STtATO: 


public void SetStatol(int 


stato] 
1 
if (state == VERDE) 
btaits:.Stato = VERDE, 
else if (stato == GIALLO) 
this.ptato =“ GIALLO; 
else if (stato == ROSSO) 


thas.bptato = KUObDbBU: 
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Il metodo SetStato deve effettuare un 
controllo sul parametro passato 


perché non tutti i valori sono 
ammessi. 


Per completare la classe definiamo 
infine il metodo ToString(): 


publie st#ine lostrinsi | 
î 
switch (Stato) 


1 
case VKKDE: return 


"Stato semaforo: verde": 


case GIALLO: return 
‘ptato semaloro;:; siallo': 
case ROSSO: return 


"stato semaforo: rosso”: 


default: return 


"Nessuna luce attiva": 


} 


Questo metodo è molto utile in 
quanto permette all'oggetto di essere 


5 pagine rimaste nel capitolo 47% 





stampato, ovvero di essere espresso 
come una String (frase). Se questo 
metodo non fosse definito, verrebbe 
stampato a video il valore 
dell'indirizzo di memoria dell'oggetto 
(es OXFF123A09). 


L'oggetto Semaforo è pronto! Non ci 
resta che collegare il tutto per 
completare l'applicazione. 


5.4 Completare l'applicazione 


Apriamo il file MainPage.xaml.cs. 


All’inizio del file dobbiamo definire 
una variabile di tipo Semaforo che 
servirà per memorizzare lo stato 
dell’applicazione al verificarsi degli 
eventi. Inoltre definiremo un nuovo 
tipo di oggetto “SolidColorBrush” che 
sara utile per cambiare il colore 
dell’Ellipse definita nell'interfaccia 
grafica. Inseriamo questo codice: 


/f Oggetto Semaforo 
private Semaforo semaforo; 


/{ Variabili per definire i colori 


private SolidColorBrush inattivo = new SolidColorBrush(); 
private SolidColorBrush verde = new SolidColorBrush(); 
private SolidColorBrush giallo = new SolidColorBrush(); 
private SolidColorBrush rosso = new SolidColorBrush(); 
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Una volta create le variabili di 
istanza, dovremo. inizializzarle nel 
costruttore, quindi inseriamo ill 
seguente codice: 

/{ Costruttore 

public MainPage() 

InitializeComponent(); 


/{ Inizializza l'oggetto semaforo 
semaforo = new Semaforo(); 


// Inizializza i colori 

inattivo.Color = Color.FromArgb(255, 211, 211, 211); 
verde.Color = Color.FromArgb(255, 0, 128, @); 
giallo.Color = Color.FromArgb(255, 255, 255, 0); 
rosso.Color = Color.FromArgb(255, 255, 0, @); 


Il metodo “FromArgb” della classe 
Color riceve come parametri il valore 
ARGB del colore desiderato. Questi 
valori possono essere visualizzati ad 
esempio nella casella delle proprietà 
quando sì sceglie un colore. 





DO a 
|. è 211 
Vo 
Miuéé—èòì1ii è 211 
Bom 211 
Ò 
A 255 





LightGray A 


4 pagine rimaste nel capitolo 48% 





Come ultima cosa dobbiamo definire i 
metodi di ogni singolo bottone. 1 
Botton (1), (2), (3), hanno metodi 
simili e consistono nel settare il 
valore del semaforo e di conseguenza 
accendere e spegnere le luci 
interessate: 


| Cosa posso fare? | 





private void button1 Click(object sender, RoutedEventArgs e) 


{ 
semaforo.SetStato(Semaforo.VERDE); 
ellipse1.Fill = inattivo; 
ellipse2.Fill = inattivo; 
ellipse3.Fill = verde; 

} 

private void button2 Click(object sender, RoutedEventArgs e) 

i 
semaforo.SetStato(Semaforo.GIALLO); 
ellipsel.Fill = inattivo; 
ellipse2.Fill = giallo; 
ellipse3.Fill = inattivo; 

} 


private void button3 _Click(object sender, RoutedEventArgs e) 
{ 

semaforo.SetStato(Semaforo.R0SS0); 

ellipsel.Fill = rosso; 

ellipse2.Fill = inattivo; 

ellipse3.Fill = inattivo; 


ur 


Con ellipse.Fill ci riferiamo al colore 
dell’Ellipse presente sull'emulatore. 


L'ultimo metodo da definire é relativo 
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al bottone 4. Questo, dopo aver letto 
lo stato del semaforo, tramite un 
MessageBox, visualizzerà l’azione 
possibile. 


private void button4 Click(object sender, RoutedEventArgs e) 


Li 
String azione; 
if (semaforo.GetStato() == Semaforo.VERDE) 
azione = "Puoi passare!": 
else if (semaforo.GetStato() == Semaforo.GIALLO) 
azione = "Attenzione! Inizia a rallentare.": 
else if (semaforo.GetStato() == Semaforo.ROSSO) 
azione = "Stop! Non puoi passare. "; 
else 
azione = "Ops.. il semaforo è rotto!": 
MessageBox.Show(semaforo.ToString() + "\n" + azione); 
} 


Il progetto é terminato. Non ci resta 
che provare l'applicazione: 
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APPLICAZIONE 





2 pagine rimaste nel capitolo 52% 


Stato semaforo: verde 
Puoi passare! 


ok 





1 pagina rimasta nel capitolo 53% 





6. Modificare il semaforo: 
navigare tra più pagine 


6.1 Creare una nuova pagina 
1. Cliccare col tasto destro sul 
progetto “Semaforo”. 
2. Selezionare Aggiungi. 
3. Scegliere Nuovo Elemento... 


4. Dalla nuova schermata 
selezionare Pagina Verticale 
Windows Phone. 


5. Cliccare su “Aggiungi”. 





Di ET A RS SANE 
mento -. 
x retta 


a INA Pane 





Pa iggiungî CROSSTOCANE 
Agg ti ina errante È notza 
Ma 


4 Installato Undina per Predefinita i =] 


di Wigigad CA 





Generzla 


FRnoia Eee 
MA Game Studio 4,0 


Fagelaami 






































Dovremo ora costruire la nuova 
interfaccia di Pagel.xaml esattamente 
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come con MainPage.xaml ripetendo 1 
passì del capitolo precedente. Per 
alutarvi copiate la parte centrale dal 
file MainPage.xaml come mostrato in 
figura: 


11 I della 
ingua ge 
. lin b 
ii 
DI agita 
l'appli: 
itleP 
«Fare 
| Text 
Content Pane ] iacgeriree vlt e "i sui 
field xilinse="ContentPane]"” Marg 12,49,12,0" Grid.Ro "lr 
cRectangle ght="ada"” Mor ALI te"Center gina"B,40,0,0 
<ell t=*100% Hori: Lignm “Center” gine "@,75,0,0° N 
«2Il Ent="i@t” Horlx Lignm "Center" gin="0,200,0,0" 
sEll ght=*168" Hor ignm “Center” gina"@,315,0,0° 
«Aut WE * Hei : hi tea Le "Lefe” Mari 
«But Gio” Helghta "72" ona «"-Center” Mar 
<Mut 50” Hedgh 7 ta ment="Right" Margin 
[_vnoe ] [nosso ] cautt "Cosa posso fare?" neight= talAlignnente 
</Grida 





| Cora posso fara? | 
rr] 


Abbiamo ora a disposizione due 
pagine con la stessa identica 
interfaccia. Per distinguerle 
modifichiamo il testo del bottone 
“Cosa posso fare?”: nella MainPage 
inseriamo come attributo Content 
dell'ultimo Button Modifica e in Pagel 
inseriamo invece Torna Indietro. 
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La nuova pagina é pronta ma, prima 
di fare qualunque altra cosa, è 
necessario implementare 1 metodi 
relativi al 4 bottoni che, in questa 
prima fase, saranno uguali a quelli 
della pagina principale, per cul 
trascriviamo l'implementazione dal 
file MainPage.xaml.cs senza andare a 


modificare l’intestazione del 
costruttore. 
6.2 Cambio di pagina 


Ora modifichiamo il metodo relativo 
alla pressione del tasto “Modifica” in 
modo che apra la nuova pagina. A tal 
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proposito cancelliamo il vecchio 
contenuto del metodo e aggiungiamo 
la seguente riga dl codice: 


NavigationService.Navigatel(new 
Uri(*/Paeel.xaml", 
UriKind.Relative)); 


Il metodo Navigate consente proprio 
di “navigare” verso la pagina 
specificata nell’ Uri (Uniform 
Resource Identifier, un indirizzo che 
rappresenta una pagina in questo 
caso). Stiamo ordinando 
all'applicazione di spostarsi. alla 
pagina Pagel.xaml. Avviamo 
l'applicazione e clicchiamo sul 
pulsante modifica per vedere il 
risultato. 


6.3 Passaggio di dati 


Pur modificando lo stato del semaforo 
nella prima pagina, al momento del 
cambio, la situazione della nuova 
pagina non subisce modifiche. Questo 
succede perché l'oggetto semaforo di 
Pagel è un oggetto completamente 
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diverso da quello di MainPage. 
Affinché le modifiche apportata nella 
prima pagina possano essere viste 
anche nella seconda dobbiamo 
passare il riferimento all'oggetto 
semaforo originale, per cul 
modifichiamo il metodo Navigate 
come segue: 


NavigationService.Navigate(new 
Uri(strine.Format("/Pagsel.izanl 
a L1i=stop', 
semaforo.ToString()), 


UriKind.BRelative))}: 


In questo modo abbiamo aggiunto un 
parametro al vecchio Uri: la stringa 
semaforo.ToString() viene sostituita a 
{o} e viene riconosciuta come 
parametro vali. 


In questo modo abbiamo inviato 1] 
dati. Ora dobbiamo fare in modo di 
riceverli. 


Torniamo al file Pagel.xaml.cs ed 
eliminiamo l’inizializzazione 
dell'oggetto semaforo: 
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public Pagel() 
fr 


1 
InitializeComponent(); 
/{ Inizializza l'oggetto semaforo 
semaforo = new Semaforo();| 
/f{ Inizializza i colori 
inattivo.Color = Color.FromArgb(255, 211, 211, 211); 
verde.Color = Color.FromArgb(255, @, 128, @); 
giallo.Color = Color.FromArgb(255, 255, 255, 0); 
rosso.Color = Color.FromArgb(255, 255, 0, @); 

} 


A questo punto crelamo un nuovo 
metodo come segue: 
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs è) 


ij 
L' 
base.OnNavigatedTo(e); 


string messaggio = 
MavigationContext.QueryString.TryGetValue("vall", out messaggio); 


MessageBox.Show(messaggio); 


Questo metodo viene richiamato 
quando sì naviga verso questa pagina 
da un’altra e non fa altro che 
prendere l'oggetto inviato con 
parametro vall e mostrarlo sul 
dispositivo. In questo modo 
otteniamo un riferimento al 
ToString() del semaforo originale. 


Proviamo l'applicazione per vedere il 
risultato: 
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Stato semaforo: giallo 





6.4 Variabili globali 


Purtroppo 1 dati che abbiamo passato 
fin'ora sono di tipo String. Per avere il 
riferimento al semaforo originale la 
cosa migliore da fare è utilizzare una 
variabile globale: una variabile che sla 
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condivisa da tutte le classi 
dell'’applicazione. Queste variabili 
vanno dichiarate nel file App.xaml.cs 
e saranno pol accessibili 
dall’applicazione stessa. Vediamo 
come fare: 


1. Nel file App.xaml.cs si dichiara la 
variabile globale semaforo 
definendo i metodi get e set per la 
stessa. 


2. Nel file MainPage.xaml.cs si 
sostituisce la variabile semaforo 
con la variabile app che farà 
riferimento all'intera 
applicazione. 

3. Bisogna eliminare anche 
l’inizializzazione del semaforo e 
inizializzare invece la variabile 
app: 
app = Application.Current 
as App; 


4.La variabile da semaforo da 
inizializzare è adesso quella 
memorizzata nell’applicazione 
quindi scriviamo: 


app.semaforo = new 


4 pagine rimaste nel capitolo 62% 





Semaforol)}): 


6. Ora sostituiamo tutti i riferimenti 
all'oggetto semaforo dei tre 
bottoni con l'oggetto 
app.semaforo. 


7. A questo punto non serve più 
passare nulla alla nuova pagina 
quindi riscriviamo la chiamata al 
metodo navigate come in 
precedenza. 


public partial class App : Aj 
lo 
L 
Offre tacile accesso al frame radice dell'applicazione Windows Phone. 


Nome radice dell'applicazione Windows Phone t 
public static PhoneApplicationFrame RootFrame { get; private set; } 


public Semaforo semaforo { get; set; } 1 
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//Oggetto applicazione 
App apps 7 


ff Variabili per definire i colori 

private SolidColorBrush inattivo = new SolidColorBrush(); 
private SolidColorBrush verde = new SolidColorBrush(); 
private SolidColorBrush giallo = new SolidColorBrush(); 
private SolidColorBrush rosso = new SolidColorBrush(); 


ff Costruttore 
public MainPage() 


i 


} 


InitializeComponent();| 

f/Inizializza la variabile app 

app = Application.Current as App; 3 

f{/Inizializza la variabile semaforo 

app.semaforo = new Semaforo(); 4 

/{ Inizializza i colori 

inattivo.Color = Color.FromArgb(255, 211, 211, 211); 
verde.Color = Color.FromArgb(255, ®, 128, @); 
giallo.Color = Color.FromArgb(255, 255, 255, 0); 
rosso.Color = Color.FromArgb(255, 255, 0, 0); 


private void buttoni Click(object sender, RoutedEventArgs e) 


i 


app.semaforo.SetStato(Sematoro.VERDE); L 
ellipsel.Fill = inattivo; 

ellipse2.Fill = inattivo; 

ellipse3.Fill = verde; 


private void button4 Click(object sender, RoutedEventArgs e) 


i 
bilia Uri("/Pagel.xaml", UriKind.Relative)); 


Ogni cambiamento fatto nella pagina 
MainPage avrà adesso ripercussioni 
sulla variabile globale per cui basterà 
far riferimento a questa variabile 
anche nel file Pagel.xaml.cs: 


1. Manteniamo la variabile 


semaforo in questo caso, ma la 
inizializziamo con il riferimento 


3 pagine rimaste nel capitolo 64% 





alla variabile globale: 


App app = 
Application.Current as App: 


semaforo = app.semaforo; 


2. A questo punto controlliamo lo 
stato del semaforo e accendiamo 
le luci di conseguenza. 


protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs i 


base.OnNavigatedTole); 


1 fipp app = Application.Current as App; 


semaforo = app.semaforo; 
if (semaforo.GetStato() == Semaforo,VERDE) 
{ 


ellipsel.Fill = inattivo; 
ellipse2.Fill = inattivo; 
ellipse3.Fill = verda; 
J a 
else if (semaforo.GetStato() == Semaforo.GIALLO) 
{ 
2 ellipsel.Fill = inattivo; 
ellipse2.Fill = giallo; 
ellipse3.Fill = inattivo; 


} 
else if (semaforo.GetStato() == Semaforo.R0SSO) 
{ 

ellipsel.Fill = rosso; 

ellipse2.Fill = inattivo; 

ellipse3.Fill = inattivo; 
} 


} 


Adesso che la variabile semaforo è 
stata inizializzata con il valore della 
variabile globale non abbiamo più 
bisogno di specificare nulla nei tre 
metodi dei bottoni che resteranno 
quindi invariati. 

Non ci resta che ridefinire il metodo 
associato al bottone “Torna Indietro” 
in pagel.xaml affinché ci riporti alla 
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pagina principale: 


private old 
button4_Click(object sender, 
RoutedEventArgs e) 


i 


NavipationService .Gabaeki 


}%& 
} 


Tornati alla pagina principale 
bisognerà aggiornare le luci in base ai 
cambiamenti fatti, quindi inseriamo 
anche qui il metodo OnNavigateTo 
con il seguente codice: 


protected override void OnNlavigatedTo(System.Windows.Navigation.NavigationeventArgs e) 


base.OnNavigatedTole); 
if (app.semaforo.GetStato() == Semaforo.VERDE) 
i 
ellipsel.Fill = inattivo; 
ellipse2.Fill = inattivo; 
ellipse3.Fill = verde; 
L 
else if (app.semaforo.GetStato() == Semaforo.GIALLO) 
{ 
ellipsel.Fill = inattivo; 
ellipse2.Fill = giallo; 
ellipse3.Fill = inattivo; 
} 
else if (app.semaforo.GetStato() == Semaforo,R0SS0) 
iP 
ellipsel.Fill = rosso; 
ellipse2.Fill = inattivo; 


ellipse3.Fill = inattivo; 
;! 
h | 


In questo caso non abbiamo bisogno 
di prendere nuovamente Il 
riferimento all'oggetto app e poi 
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all'oggetto semaforo in quanto gia 
memorizzato nella variabile App che 
non é cambiata. 
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Parte 3 


APPROFONDIMENTI 


1 pagina rimasta nel capitolo 69% 





7. Panorama a Pivot 


7.1 L’interfaccia Metro 


Il look accattivante di Windows 
Phone 8 non è dovuto solamente alle 
acclamate Live Tiles, ma soprattutto 
al due controlli di navigazione: 
Panorama e Pivot. 


Panorama e Pivot sono simili, 
entrambi molto semplici sia da 
sviluppare che da utilizzare, sono 
controlli che presentano un modo 
innovativo di mostrare le 
informazioni adattandole alle 
dimensioni ridotte dello schermo e 
sfruttando le potenzialità del 
touchscreen. 


Le differenze seppur poche sono 
sostanziali: Pivot divide lo spazio in 
maniera orizzontale creando del 
pannelli che possono essere visti uno 
alla volta e trascinati verticalmente; 
Panorama invece ha lo scopo di dare 
la sensazione di un grande schermo, 
del quale vediamo però una sola parte 
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per volta (basta spostarsi verso destra 
o sinistra per vedere il resto). 


7.2 Panorama 


Panorama consente di uscire dal 
confini imposti dalle dimensioni 
ridotte dei nostri schermi. Finora, 
infatti, la grandezza dello schermo 
rappresentava una delle più grandi 
limitazioni per la programmazione su 
dispositivi mobili. Con Panorama 
abbiamo la possibilità di muoverci in 
ampli spazi con piccoli schermi. 
L'escamotage è ben riuscito: pur 
muovendosi tra varie pagine, l’effetto 
e quello di una sola ampia schermata! 
In ogni pagina infatti, rappresentata 
da un Panoramaltem, èé visibile la 
pagina successiva sulla quale ci sì può 
facilmente spostare. 
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Usare panorama é semplice anche in 
programmazione, per cul non cl resta 
che editare il relativo file XAML o più 
semplicemente aggiungere una 
pagina con il layout panorama già 
Impostato. Vediamo il primo caso: 


<Grid x:Name="LayoutRoot"> 
<phone:Panorama Title="applicazione"> 
<phone:Panorama.Background> 
<ImageBrush ImageSource="/image 6.png /> 
</phone:Panorama. Background» 


<!--Elemento Panorama uno--> 
<phone:Panoramaltem Header="iteml"> 
<Grid> 
<StackPanel> 
<«TextBlock 
Text="Questo è un esempio ..." 
Style="{StaticResource PhoneTextLargeStyle}" 
TextWrapping=" Wrap" /> 
</StackPanel> 
</Grid> 
</phone:Panoramaltem> 


<!--Elemento Panorama due--> 
<«phone:PanoramalItem Header="item2"> 
<Grid/> 
</phone:Panoramaltem> 
</phone:Panorama> 
</Grid> 
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Il file XAML è estremamente semplice 
ed intuitivo, ci siamo cimentati 
nell'inserire un'immagine di sfondo, 
un titolo, un blocco di testo come 
esempio e un nuovo Item del 
Panorama. 
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Panorama è una grafica per molteplici 
utilizzi. Generalmente costituisce la 
pagina principale dell’applicazione 
perché evidenzia tutti i punti salienti 
di questa senza confondere 
l’utente/cliente. Non è necessario 
creare viste cariche di dati e 
informazioni, grazie a Panorama si 
può avere una visuale ampia e globale 
senza perdere di vista le informazioni 
di maggior interesse. 


7.3 Pivot 


Il controllo Pivot è rappresentato da 
una sorta di gestione delle schede 
ottimizzata, ovviamente, per il 
touchscreen. Non tutte le schede (che 
si chiamano PivotItems) vengono 
mostrate contemporaneamente, esse 
appalono all'utente solo se attivate. 
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ORC RORO 


Come Panorama, anche Pivot ha uno 
XAML estremamente semplice e 
intuitivo. Vediamo subito un esempio: 


<Grid x:Name="LayoutRoot" Background="Transparent"> 
<!--Controllo Pivot--> 
<phone:Pivot Title="Esempio Pivot > 
<!--Elemento Pivot uno--> 
<phone:PivotItem Header="iteml'> 
<Grid> 
<StackPanel Margin="20"> 
<TextBlock 
TextWrapping="Wrap" 
Text="Questo è un esempio ... 
Style="{StaticResource PhoneTextLargeStyle}"> 
</TextBlock> 
</StackPanel> 
</Grid> 
</phone:PivotItem> 


<!--Elemento Pivot due--> 
<phone:PivotItem Header="item2"> 
<Grid/> 
</phone:PivotItem> 
</phone:Pivot> 
</Grid> 
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Gli scenari di utilizzo di Pivot sono 
molti, esso può essere utilizzato per 
pagine contenenti dati indipendenti 
tra loro, o che seguono una 
particolare gerarchia. L'utilizzo 
classico è mostrare liste di 
informazioni, talvolta anche 
dettagliate. 


7.4 Modificare la grafica con 
Visual Studio 


Finora abbiamo visto come sì 
manipolano Panorama e Pivot tramite 
codice  XAML. Chi non vuole 
“sporcarsi le mani” con 1 vari tag che 
XAML ci offre, non deve affatto 
preoccuparsi! Visual Studio ci 
permette di utilizzare questi controlli 
senza mettere mano al codice, 
modificando i parametri che ci 
interessano tramite la grafica che 
abblamo conosciuto. 


7.5 Nuovo progetto con 
Panorama e Pivot 
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Per creare unapplicazione che 
contenga un controllo Panorama o 
Pivot non cl resta che creare un nuovo 
progetto cliccando su File > Nuovo 
Progetto e scegliere il template di 
nostro gradimento. 


C*# 
| Applicazione Panorama Windows Phone Visual C# 


=Ca 
6 Applicazione Pivot Windows Phone Visual C# 


Oppure è possibile semplicemente 
aggiungere una nuova pagina 
Panorama/Pivot a un progetto gia 
esistente. 


W Pagina Panorama Windows Phone Visual C# 





Fal Pagina Pivot Windows Phone Visual C# 


Quindi Panorama e Pivot sono 
incredibilmente utili per un 
programmatore, e sarebbe 
Interessante sperimentarli entrambi, 
date anche le diverse visualizzazioni 
da adattare al tipo di applicazione 
creata! 


Buon lavoro! 
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Conclusione 


In questo secondo livello del corso 
abbiamo definito i capi saldi della 
programmazione orientata agli 
oggetti, abbiamo imparato a utilizzare 
le classi, le variabili e 1 metodi di un 
oggetto. Abbiamo poi analizzato 1 
parametri e 1 due principali metodi 
per il loro passaggio in C# e 1 controlli 
della grafica Metro Panorama e Pivot. 


Nel nostri progetti pratici abbiamo 
implementato e gestito figure in 2D e 
abbiamo definito la nostra 
applicazione su più pagine tramite il 
passaggio di stringhe e l'utilizzo delle 
variabili globali. 


Nel prossimo livello oltre a imparare 
nuovi costrutti C# e strumenti per la 
POO, creeremo applicazioni più 
complesse sfruttando nuovi metodi e 
saremo capaci di realizzare, ad 
esempio, una galleria di immagini per 
la nostra app. 
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